import React, { Component,PureComponent } from 'react'
import Child from './Child'

export default class Parent extends PureComponent {
  constructor() {
    super();
    console.log('parent constructor')
    this.state = {
      num: 1,
      name: '',
      showChild: true
    }
  }
  render() {
    console.log('parent render')
    return (
      <div id="parent">

        {
          this.state.showChild ? <Child num={this.state.num}></Child> : ''
        }

        <hr />
        <button onClick={() => {
          this.setState({
            num: this.state.num += 1
          })
          // this.state.num += 1;
          // this.forceUpdate()
          // this.setState({})
        }}>更新</button>
        <button onClick={()=>{
          this.setState({
            showChild:!this.state.showChild
          })
        }}>显示/隐藏子组件</button>
      </div>
    )
  }

  componentDidMount() {
    console.log('parent componentDidMount')
    // setTimeout(() => {
    //   this.setState({
    //     name: 'admin'
    //   })
    // }, 2000)
  }


  shouldComponentUpdate(){
    if(this.state.num===3){
      return false;
    }else{
      return true;
    }
    
  }

  getSnapshotBeforeUpdate(){
    console.log('parent getSnapshotBeforeUpdate');
    return {
      y:200
    }
  }
  componentDidUpdate() {

    console.log('parent componentDidUpdate',arguments)
    console.log(document.getElementById("parent").innerHTML)
  }

}
